<template>
    <div class="container">
        <!-- 工单列表--主体列表展示 -->
        <div class="callHistoryMain">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline"
                label-width="100px"
                size="small"
            >
                <el-form-item label="工单编号：">
                    <el-input v-model="formData.sheetId" size="small" placeholder="请输入内容"></el-input>
                </el-form-item>
                <!--<el-form-item label="紧急程度：">-->
                <!--<el-select v-model="formData.emCode" clearable placeholder="请选择" style="width: 200px;">-->
                <!--<el-option label="一般" value="1"></el-option>-->
                <!--<el-option label="急" value="2"></el-option>-->
                <!--<el-option label="紧急" value="3"></el-option>-->
                <!--</el-select>-->
                <!--</el-form-item>-->
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="hanlesearch"
                    :loading="searchLoading"
                    class="searchBtn"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    :loading="resetLoading"
                    class="resetBtn"
                >重 置</el-button>
            </el-form>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="工单编码" prop="sheetId"></el-table-column>
                <!--<el-table-column label="紧急程度">-->
                <!--<template slot-scope="scope">-->
                <!--<span v-if="scope.row.emCode === '1'">一般</span>-->
                <!--<span v-if="scope.row.emCode === '2'">急</span>-->
                <!--<span v-if="scope.row.emCode === '3'">紧急</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="工单发起人" prop="workerName"></el-table-column>
                <el-table-column label="工单类型" prop="typeCode"></el-table-column>
                <el-table-column label="客户名称" prop="custName"></el-table-column>
                <el-table-column label="额定完成时间" prop="completeTime"></el-table-column>
                <el-table-column label="工单状态" prop="statusCode"></el-table-column>
                <el-table-column label="任务开始时间" prop="createTime"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
        </div>
    </div>
</template>

<script>
import Pagination from '../../components/Pagination/Pagination.vue';
import { mapState } from 'vuex'
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'workOrder',
    components: {
        Pagination,
    },
    data() {
        return {
            formData: {
                sheetId: '',
                emCode: '',
                fileTag: '',
            },
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            flag: 1,
        };
    },
    mounted() {
        this.flag = this.$route.query.flag;
        this.getInitData(this.formData);
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
    }),
    methods: {
        // 获取工单表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                companyId: getTokenHsbankNo('HsbankNo'),
                custCertNo: this.cardInfo_3004.CUSTID, // '410184199610215034'
            };
            if (!this.cardInfo_3004.CUSTID) {
                return;
            }
            params = Object.assign({}, params, form);
            // this.$post.customer.orderPage(params)
            //     .then((res) => {
            //         if (res.status === 200) {
            //             this.tableData = res.data.content.recordList;
            //             this.total = res.data.content.recordCount;
            //         }
            //     });
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },
        // 点击重置
        handleReset() {
            this.formData = {
                sheetId: '',
                emCode: '',
                fileTag: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
        },

        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
    },
};
</script>

<style  lang="scss" >
.container {
    width: 100%;
    height: 100%;
    .callHistoryMain {
        width: 100%;
        background: #fff;
        margin: 10px 0 15px;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
